<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钓鱼游戏</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: Arial, sans-serif;
            min-height: 100vh;
            background: url('背景.jpg') no-repeat center center fixed;
            background-size: cover;
            overflow: hidden;
            position: relative;
        }
        
        /* 鱼竿 */
        .fishing-rod {
            position: fixed;
            top: 20px;
            left: 20px;
            width: 120px;
            height: 120px;
            z-index: 250;
            cursor: pointer;
            transition: transform 0.3s;
        }
        .fishing-rod:hover {
            transform: scale(1.05);
        }
        .fishing-rod img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
        }
        
        .animal-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            z-index: 100;
        }
        #animal {
            width: 180px;
            height: 180px;
            object-fit: contain;
            cursor: pointer;
            transition: transform 0.3s;
        }
        #animal:hover { transform: scale(1.05); }
        
        #animalVideo {
            width: 200px;
            height: 200px;
            object-fit: contain;
            display: none;
        }
        
        .feed-count {
            position: fixed;
            top: 20px;
            left: 160px;
            background: rgba(0,0,0,0.6);
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 18px;
            z-index: 200;
        }
        
        .hint {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.6);
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            z-index: 200;
        }
        
        /* 钓鱼小游戏界面 */
        .fishing-game {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 500px;
            background: rgba(20, 40, 60, 0.95);
            border: 4px solid #8B4513;
            border-radius: 15px;
            display: none;
            flex-direction: column;
            z-index: 300;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        }
        .fishing-game.active { display: flex; }
        
        .fishing-header {
            padding: 15px;
            background: rgba(0,0,0,0.3);
            text-align: center;
            color: white;
            font-size: 18px;
            border-bottom: 2px solid #8B4513;
        }
        
        .fishing-track {
            flex: 1;
            position: relative;
            margin: 20px;
            background: linear-gradient(to bottom, #1a3a52 0%, #0d1f2d 100%);
            border: 3px solid #2c5f7f;
            border-radius: 10px;
            overflow: hidden;
        }
        
        /* 鱼（目标） */
        .fish-target {
            position: absolute;
            left: 10px;
            width: 60px;
            height: 50px;
            background: rgba(255, 200, 50, 0.8);
            border: 2px solid #ff9900;
            border-radius: 8px;
            transition: top 0.05s linear;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        
        /* 玩家控制的绿条 */
        .player-bar {
            position: absolute;
            left: 10px;
            width: 60px;
            height: 80px;
            background: rgba(50, 255, 50, 0.7);
            border: 2px solid #00ff00;
            border-radius: 8px;
            transition: top 0.03s linear;
        }
        
        /* 进度条 */
        .progress-container {
            margin: 0 20px 20px 20px;
            height: 30px;
            background: rgba(0,0,0,0.3);
            border-radius: 15px;
            overflow: hidden;
            border: 2px solid #555;
        }
        .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            transition: width 0.1s linear;
            border-radius: 15px;
        }
        
        .fishing-hint {
            text-align: center;
            color: white;
            padding: 0 20px 15px 20px;
            font-size: 14px;
        }
        
        .death-message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255,0,0,0.9);
            color: white;
            padding: 30px 50px;
            border-radius: 15px;
            font-size: 24px;
            z-index: 300;
            display: none;
            text-align: center;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }
        .death-message img {
            width: 150px;
            height: 150px;
            object-fit: contain;
        }
        .restart-btn {
            padding: 12px 30px;
            background: white;
            color: #333;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 10px;
        }
        .restart-btn:hover { background: #eee; }
        
        /* 成就系统 */
        .achievements {
            position: fixed;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 8px;
            z-index: 200;
            background: rgba(0,0,0,0.5);
            padding: 10px 15px;
            border-radius: 10px;
        }
        .achievements span {
            font-size: 12px;
            color: white;
            margin-right: 5px;
        }
        .achievement {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 5px;
            filter: grayscale(100%) brightness(0.5);
            transition: filter 0.3s;
        }
        .achievement.unlocked {
            filter: none;
            box-shadow: 0 0 10px gold;
        }
        
        /* 背景飘过的食物 */
        .floating-food {
            position: absolute;
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 8px;
            opacity: 0.6;
            z-index: 10;
            animation: floatLeft linear forwards;
            pointer-events: none;
        }
        
        @keyframes floatLeft {
            0% { 
                transform: translateX(0) translateY(0) rotate(0deg);
                opacity: 0.6;
            }
            25% { 
                transform: translateX(-25vw) translateY(-20px) rotate(90deg);
                opacity: 0.5;
            }
            50% { 
                transform: translateX(-50vw) translateY(15px) rotate(180deg);
                opacity: 0.4;
            }
            75% { 
                transform: translateX(-75vw) translateY(-10px) rotate(270deg);
                opacity: 0.3;
            }
            100% { 
                transform: translateX(-110vw) translateY(0) rotate(360deg);
                opacity: 0;
            }
        }
        
        /* 钓到食物提示 */
        .catch-notification {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 30px 40px;
            border-radius: 20px;
            z-index: 400;
            text-align: center;
            transition: transform 0.3s;
            box-shadow: 0 10px 40px rgba(0,0,0,0.8);
        }
        .catch-notification.show {
            transform: translate(-50%, -50%) scale(1);
        }
        .catch-notification img {
            width: 150px;
            height: 150px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 15px;
        }
        .catch-notification h2 {
            font-size: 28px;
            margin-bottom: 10px;
            color: #FFD700;
        }
        .catch-notification p {
            font-size: 16px;
            color: #ccc;
            max-height: 200px;
            overflow-y: auto;
        }
        .rarity {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 15px;
            font-size: 14px;
            margin-top: 10px;
            font-weight: bold;
        }
        .rarity.common { background: #808080; }
        .rarity.uncommon { background: #4CAF50; }
        .rarity.rare { background: #2196F3; }
        .rarity.epic { background: #9C27B0; }
        .rarity.legendary { background: #FF9800; }
        .rarity.trash { background: #8B4513; }
        .rarity.protected { background: #E91E63; }
        
        .catch-notification .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            background: rgba(255,255,255,0.2);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 20px;
            cursor: pointer;
            display: none;
        }
        .catch-notification .close-btn:hover {
            background: rgba(255,255,255,0.3);
        }
        .catch-notification .challenge-buttons {
            display: none;
            gap: 15px;
            justify-content: center;
            margin-top: 20px;
        }
        .catch-notification .challenge-buttons button {
            padding: 12px 25px;
            font-size: 16px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .catch-notification .start-challenge-btn {
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            color: white;
        }
        .catch-notification .start-challenge-btn:hover {
            transform: scale(1.05);
        }
        .catch-notification .give-up-challenge-btn {
            background: #666;
            color: white;
        }
        .catch-notification .give-up-challenge-btn:hover {
            background: #777;
        }
        
        /* 成就通知 */
        .achievement-notification {
            position: fixed;
            top: 100px;
            right: -400px;
            width: 350px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            z-index: 500;
            display: flex;
            align-items: center;
            gap: 15px;
            transition: right 0.5s ease-out;
        }
        .achievement-notification.show {
            right: 20px;
        }
        .achievement-notification img {
            width: 60px;
            height: 60px;
            object-fit: contain;
        }
        .achievement-notification .content {
            flex: 1;
        }
        .achievement-notification .title {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 5px;
        }
        .achievement-notification .name {
            font-size: 20px;
            font-weight: bold;
        }
        
        /* 鱼篓 */
        .fish-basket {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 100px;
            height: 100px;
            z-index: 250;
            cursor: pointer;
            transition: transform 0.3s;
        }
        .fish-basket:hover {
            transform: scale(1.1);
        }
        .fish-basket img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
        }
        .fish-basket .count-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ff4444;
            color: white;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: bold;
        }
        
        /* 鱼篓悬浮提示 */
        .basket-tooltip {
            position: fixed;
            bottom: 130px;
            right: 20px;
            width: 220px;
            max-height: 300px;
            background: rgba(0, 0, 0, 0.9);
            border-radius: 10px;
            padding: 15px;
            z-index: 260;
            display: none;
            box-shadow: 0 5px 20px rgba(0,0,0,0.5);
            overflow-y: auto;
        }
        .basket-tooltip.show {
            display: block;
        }
        .basket-tooltip h4 {
            color: #FFD700;
            margin-bottom: 10px;
            text-align: center;
            border-bottom: 1px solid #555;
            padding-bottom: 8px;
        }
        .basket-tooltip .fish-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            margin-bottom: 5px;
            background: rgba(255,255,255,0.1);
            border-radius: 8px;
        }
        .basket-tooltip .fish-item img {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 5px;
        }
        .basket-tooltip .fish-item span {
            color: white;
            font-size: 14px;
        }
        .basket-tooltip .empty-msg {
            color: #888;
            text-align: center;
            padding: 20px;
        }
        
        /* 喂食选择框 */
        .feed-selector {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 350px;
            background: rgba(0, 0, 0, 0.95);
            border-radius: 15px;
            padding: 20px;
            z-index: 400;
            box-shadow: 0 10px 40px rgba(0,0,0,0.8);
            transition: transform 0.3s;
        }
        .feed-selector.show {
            transform: translate(-50%, -50%) scale(1);
        }
        .feed-selector h3 {
            color: #FFD700;
            text-align: center;
            margin-bottom: 15px;
        }
        .feed-selector select {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            border-radius: 8px;
            border: 2px solid #555;
            background: #222;
            color: white;
            margin-bottom: 15px;
            cursor: pointer;
        }
        .feed-selector select option {
            padding: 10px;
        }
        .feed-selector .btn-group {
            display: flex;
            gap: 10px;
        }
        .feed-selector button {
            flex: 1;
            padding: 12px;
            font-size: 16px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .feed-selector .feed-btn {
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            color: white;
        }
        .feed-selector .feed-btn:hover {
            transform: scale(1.05);
        }
        .feed-selector .feed-btn:disabled {
            background: #555;
            cursor: not-allowed;
            transform: none;
        }
        .feed-selector .cancel-btn {
            background: #666;
            color: white;
        }
        .feed-selector .cancel-btn:hover {
            background: #777;
        }
        
        /* 成就按钮 */
        .achievements-button {
            position: fixed;
            left: 20px;
            bottom: 20px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #FFD700, #FFA500);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 250;
            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.5);
            transition: all 0.3s;
            border: 3px solid #fff;
        }
        .achievements-button:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.7);
        }
        .achievements-button img {
            width: 35px;
            height: 35px;
            object-fit: contain;
        }
        
        /* 成就栏 */
        .achievements-panel {
            position: fixed;
            left: 20px;
            bottom: 90px;
            width: 300px;
            max-height: 450px;
            background: rgba(0, 0, 0, 0.9);
            border-radius: 15px;
            padding: 15px;
            z-index: 250;
            overflow-y: auto;
            display: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.7);
        }
        .achievements-panel.show {
            display: block;
        }
        .achievements-panel h3 {
            color: #FFD700;
            font-size: 18px;
            margin-bottom: 10px;
            text-align: center;
            border-bottom: 2px solid #FFD700;
            padding-bottom: 8px;
        }
        .achievement-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            margin-bottom: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        .achievement-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(5px);
        }
        .achievement-item.unlocked {
            border-color: #FFD700;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
        }
        .achievement-item.locked {
            opacity: 0.5;
            filter: grayscale(100%);
        }
        .achievement-item img {
            width: 40px;
            height: 40px;
            object-fit: contain;
        }
        .achievement-item .info {
            flex: 1;
        }
        .achievement-item .info .name {
            color: white;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 3px;
        }
        .achievement-item .info .progress {
            color: #aaa;
            font-size: 11px;
        }
        .achievement-item.unlocked .info .name {
            color: #FFD700;
        }
        
        /* 成就详情弹窗 */
        .achievement-detail {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 400px;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 15px 50px rgba(0,0,0,0.7);
            z-index: 600;
            transition: transform 0.3s;
            text-align: center;
        }
        .achievement-detail.show {
            transform: translate(-50%, -50%) scale(1);
        }
        .achievement-detail img {
            width: 100px;
            height: 100px;
            object-fit: contain;
            margin-bottom: 20px;
        }
        .achievement-detail h2 {
            font-size: 28px;
            margin-bottom: 15px;
            color: #FFD700;
        }
        .achievement-detail .description {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 20px;
            color: #ddd;
        }
        .achievement-detail .close-btn {
            padding: 10px 30px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 2px solid white;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
        }
        .achievement-detail .close-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }
        .achievement-detail .status {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 15px;
            font-size: 14px;
            margin-bottom: 15px;
        }
        .achievement-detail .status.unlocked {
            background: #4CAF50;
        }
        .achievement-detail .status.locked {
            background: #666;
        }
        
        /* 拼图游戏 */
        .puzzle-game {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 500;
        }
        .puzzle-game.show {
            display: flex;
        }
        .puzzle-header {
            color: white;
            text-align: center;
            margin-bottom: 20px;
        }
        .puzzle-header h2 {
            font-size: 28px;
            color: #FFD700;
            margin-bottom: 10px;
        }
        .puzzle-timer {
            font-size: 36px;
            color: #ff6b6b;
            font-weight: bold;
        }
        .puzzle-timer.warning {
            animation: timerBlink 0.5s infinite;
        }
        @keyframes timerBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .puzzle-container {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 3px;
            background: #333;
            padding: 5px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .puzzle-piece {
            width: 100px;
            height: 100px;
            background-size: 300px 300px;
            cursor: pointer;
            border-radius: 5px;
            transition: transform 0.1s, box-shadow 0.2s;
        }
        .puzzle-piece:hover {
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }
        .puzzle-piece.selected {
            box-shadow: 0 0 15px #FFD700;
            transform: scale(1.08);
        }
        .puzzle-piece.empty {
            background: #222 !important;
            cursor: default;
        }
        .puzzle-piece.empty:hover {
            transform: none;
            box-shadow: none;
        }
        .puzzle-preview {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 150px;
            height: 150px;
            border: 3px solid #FFD700;
            border-radius: 10px;
            overflow: hidden;
        }
        .puzzle-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .puzzle-preview-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.7);
            color: white;
            text-align: center;
            padding: 5px;
            font-size: 12px;
        }
        .puzzle-result {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            background: rgba(0, 0, 0, 0.95);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            z-index: 550;
            transition: transform 0.3s;
        }
        .puzzle-result.show {
            transform: translate(-50%, -50%) scale(1);
        }
        .puzzle-result img {
            width: 150px;
            height: 150px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .puzzle-result h2 {
            color: #FFD700;
            font-size: 28px;
            margin-bottom: 15px;
        }
        .puzzle-result p {
            color: #ccc;
            font-size: 16px;
            margin-bottom: 20px;
        }
        .puzzle-result button {
            padding: 12px 30px;
            font-size: 16px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            margin: 5px;
        }
        .puzzle-result .success-btn {
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            color: white;
        }
        .puzzle-result .fail-btn {
            background: #666;
            color: white;
        }
        .puzzle-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 20px;
        }
        .puzzle-buttons button {
            padding: 12px 30px;
            font-size: 16px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .puzzle-buttons .give-up-btn {
            background: #ff6b6b;
            color: white;
        }
        .puzzle-buttons .give-up-btn:hover {
            background: #ff5252;
            transform: scale(1.05);
        }
        
        /* 段位评价弹窗 */
        .rank-evaluation {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 450px;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border-radius: 25px;
            padding: 40px;
            z-index: 600;
            box-shadow: 0 20px 60px rgba(0,0,0,0.8);
            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            text-align: center;
            border: 3px solid;
        }
        .rank-evaluation.show {
            transform: translate(-50%, -50%) scale(1);
        }
        .rank-evaluation .rank-icon {
            font-size: 80px;
            margin-bottom: 20px;
            animation: rankBounce 0.6s ease-out;
        }
        @keyframes rankBounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
        .rank-evaluation .rank-title {
            font-size: 20px;
            color: #aaa;
            margin-bottom: 10px;
            letter-spacing: 2px;
        }
        .rank-evaluation .rank-name {
            font-size: 42px;
            font-weight: bold;
            margin-bottom: 20px;
            text-shadow: 0 0 20px currentColor;
            letter-spacing: 3px;
        }
        .rank-evaluation .rank-score {
            font-size: 24px;
            color: #FFD700;
            margin-bottom: 15px;
            font-weight: bold;
        }
        .rank-evaluation .rank-desc {
            font-size: 16px;
            color: #ccc;
            line-height: 1.6;
            margin-bottom: 30px;
            padding: 0 20px;
        }
        .rank-evaluation .rank-continue-btn {
            padding: 15px 40px;
            font-size: 18px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        .rank-evaluation .rank-continue-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.6);
        }
        .rank-evaluation .rank-stars {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
            font-size: 30px;
        }
        .rank-evaluation .rank-star {
            opacity: 0;
            animation: starAppear 0.3s ease-out forwards;
        }
        .rank-evaluation .rank-star:nth-child(1) { animation-delay: 0.1s; }
        .rank-evaluation .rank-star:nth-child(2) { animation-delay: 0.2s; }
        .rank-evaluation .rank-star:nth-child(3) { animation-delay: 0.3s; }
        .rank-evaluation .rank-star:nth-child(4) { animation-delay: 0.4s; }
        .rank-evaluation .rank-star:nth-child(5) { animation-delay: 0.5s; }
        @keyframes starAppear {
            0% { opacity: 0; transform: scale(0) rotate(0deg); }
            100% { opacity: 1; transform: scale(1) rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="fishing-rod" id="fishingRod">
        <img src="鱼竿.png" alt="鱼竿">
    </div>
    
    <div class="feed-count">已喂食: <span id="feedCount">0 (0分)</span> / 3</div>
    
    <!-- 成就按钮 -->
    <div class="achievements-button" id="achievementsButton" onclick="toggleAchievementsPanel()">
        <img src="徽章.png" alt="成就">
    </div>
    
    <!-- 成就面板 -->
    <div class="achievements-panel" id="achievementsPanel"></div>
    
    <!-- 成就详情弹窗 -->
    <div class="achievement-detail" id="achievementDetail">
        <img id="detailIcon" src="" alt="成就图标">
        <span class="status" id="detailStatus">未解锁</span>
        <h2 id="detailName"></h2>
        <div class="description" id="detailDescription"></div>
        <button class="close-btn" onclick="closeAchievementDetail()">关闭</button>
    </div>
    
    <div class="achievements">
        <span>成就:</span>
        <img class="achievement" id="ach1" src="一.png" alt="成就1" title="一">
        <img class="achievement" id="ach2" src="二.png" alt="成就2" title="二">
        <img class="achievement" id="ach3" src="三.png" alt="成就3" title="三">
        <img class="achievement" id="ach4" src="四.png" alt="成就4" title="四">
        <img class="achievement" id="ach5" src="五.png" alt="成就5" title="五">
    </div>
    
    <div class="animal-container">
        <img id="animal" src="shark.png" alt="鲨鱼" draggable="false">
        <video id="animalVideo" src="shark g.mp4" muted></video>
    </div>
    
    <!-- 钓鱼小游戏 -->
    <div class="fishing-game" id="fishingGame">
        <div class="fishing-header">
            <div>🎣 钓鱼中... 按住空格保持绿条覆盖鱼！</div>
        </div>
        <div class="fishing-track" id="fishingTrack">
            <div class="fish-target" id="fishTarget">🐟</div>
            <div class="player-bar" id="playerBar"></div>
        </div>
        <div class="progress-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        <div class="fishing-hint">进度满了就成功！鱼跑了就失败！</div>
    </div>
    
    <!-- 钓到食物提示 -->
    <div class="catch-notification" id="catchNotification">
        <button class="close-btn" id="catchCloseBtn" onclick="closeCatchNotification()">×</button>
        <img id="catchImage" src="" alt="钓到的食物">
        <h2 id="catchTitle">🎣 钓到了！</h2>
        <p id="catchDescription"></p>
        <span class="rarity" id="catchRarity"></span>
        <div class="challenge-buttons" id="challengeButtons">
            <button class="start-challenge-btn" onclick="acceptChallenge()">开始挑战</button>
            <button class="give-up-challenge-btn" onclick="declineChallenge()">放弃挑战</button>
        </div>
    </div>
    
    <!-- 成就通知 -->
    <div class="achievement-notification" id="achievementNotification">
        <img src="徽章.png" alt="成就徽章">
        <div class="content">
            <div class="title">🏆 成就解锁</div>
            <div class="name" id="achievementName"></div>
        </div>
    </div>
    
    <div class="death-message" id="deathMessage">
        <img src="shark2.jpg" alt="死亡鲨鱼">
        <p>🦈 鲨鱼吃了垃圾死掉了！我们要保护环境啊————不要乱扔垃圾了！</p>
        <button class="restart-btn" onclick="restartGame()">重新开始</button>
    </div>
    
    <!-clas -->
    <div class="fish-basket" id="fishBasket">
        <img src="鱼篓.jpg" alt="鱼篓">
        <div class="count-badge" id="basketCount">0</div>
    </div>
    
    <!-- 鱼篓悬浮提示 -->
    <div class="basket-tooltip" id="basketTooltip">
        <h4>🐟 鱼篓 (0/10)</h4>
        <div class="empty-msg">鱼篓是空的</div>
    </div>
    
    <!-- 喂食选择框 -->
    <div class="feed-selector" id="feedSelector">
        <h3>🦈 选择要喂给鲨鱼的食物</h3>
        <select id="feedSelect">
            <option value="">-- 请选择 --</option>
        </select>
        <div class="btn-group">
            <button class="feed-btn" id="confirmFeedBtn" onclick="confirmFeed()" disabled>喂食</button>
            <button class="cancel-btn" onclick="closeFeedSelector()">取消</button>
        </div>
    </div>
    
    <!-- 拼图游戏 -->
    <!-- 拼图游戏 -->
    <div class="puzzle-game" id="puzzleGame">
        <div class="puzzle-header">
            <h2>🧩 华容道挑战！</h2>
            <div class="puzzle-timer" id="puzzleTimer">90</div>
        </div>
        <div class="puzzle-container" id="puzzleContainer"></div>
        <div class="puzzle-buttons">
            <button class="give-up-btn" onclick="giveUpPuzzle()">放弃挑战</button>
        </div>
        <div class="puzzle-preview">
            <img id="puzzlePreviewImg" src="" alt="预览">
            <div class="puzzle-preview-label">目标图片</div>
        </div>
    </div>
    
    <!-- 拼图结果 -->
    <div class="puzzle-result" id="puzzleResult">
        <img id="puzzleResultImg" src="" alt="结果">
        <h2 id="puzzleResultTitle"></h2>
        <p id="puzzleResultDesc"></p>
        <button class="success-btn" id="puzzleResultBtn" onclick="closePuzzleResult()">确定</button>
    </div>
    
    <!-- 段位评价弹窗 -->
    <div class="rank-evaluation" id="rankEvaluation">
        <div class="rank-icon" id="rankIcon">🦈</div>
        <div class="rank-title">本次喂食评价</div>
        <div class="rank-name" id="rankName">万事不挂怀</div>
        <div class="rank-score" id="rankScore">总积分: 300</div>
        <div class="rank-stars" id="rankStars">
            <span class="rank-star">⭐</span>
            <span class="rank-star">⭐</span>
            <span class="rank-star">⭐</span>
            <span class="rank-star">⭐</span>
            <span class="rank-star">⭐</span>
        </div>
        <div class="rank-desc" id="rankDesc">完美的盛宴！鲨鱼心满意足！</div>
        <button class="rank-continue-btn" onclick="closeRankEvaluation()">继续游戏</button>
    </div>
    
    <p class="hint">点击鱼竿开始钓鱼 | 点击鲨鱼与AI对话 | 点击鱼篓选择喂食</p>=>

    <script>
        const animal = document.getElementById('animal');
        const animalVideo = document.getElementById('animalVideo');
        const feedCountEl = document.getElementById('feedCount');
        const deathMessage = document.getElementById('deathMessage');
        const fishingRod = document.getElementById('fishingRod');
        const fishingGame = document.getElementById('fishingGame');
        const fishTarget = document.getElementById('fishTarget');
        const playerBar = document.getElementById('playerBar');
        const progressBar = document.getElementById('progressBar');
        const fishingTrack = document.getElementById('fishingTrack');
        const catchNotification = document.getElementById('catchNotification');
        const catchImage = document.getElementById('catchImage');
        const catchTitle = document.getElementById('catchTitle');
        const catchDescription = document.getElementById('catchDescription');
        const catchRarity = document.getElementById('catchRarity');
        const achievementNotification = document.getElementById('achievementNotification');
        const achievementName = document.getElementById('achievementName');
        
        let feedCount = 0;
        let fedFoods = [];
        let feedScore = 0; // 当前喂食积分
        let isPlaying = false;
        let isDead = false;
        let isFishing = false;
        
        // 鱼篓系统
        let fishBasketItems = []; // 存储鱼篓中的鱼 [{id: 1, name: '沙丁鱼'}, ...]
        const MAX_BASKET_SIZE = 10;
        
        // 钓鱼游戏变量
        let fishPos = 0;
        let playerPos = 0;
        let fishVelocity = 0;
        let playerVelocity = 0;
        let progress = 0;
        let fishingInterval = null;
        let spacePressed = false;
        let trackHeight = 0;
        let currentFoodId = 0;
        let currentDifficulty = {};
        
        // 成就统计
        let consecutiveFails = 0;
        let consecutiveSuccess = 0;
        let consecutiveTrash = 0;
        let totalFails = 0;
        let totalSuccess = 0;
        let unlockedFishingAchievements = new Set(JSON.parse(sessionStorage.getItem('fishingAchievements') || '[]'));
        
        // 成就配置
        const achievementsConfig = [
            {
                id: 'captain',
                name: '空军上尉',
                description: '连续5次钓鱼失败',
                icon: '徽章.png'
            },
            {
                id: 'colonel',
                name: '空军上校',
                description: '连续10次钓鱼失败',
                icon: '徽章.png'
            },
            {
                id: 'general',
                name: '将！军！',
                description: '累计钓鱼失败50次',
                icon: '徽章.png'
            },
            {
                id: 'fisher',
                name: '捕鱼能手',
                description: '连续3次成功钓鱼',
                icon: '徽章.png'
            },
            {
                id: 'master',
                name: '河边蓑笠翁',
                description: '累计10次钓鱼成功',
                icon: '徽章.png'
            },
            {
                id: 'trash',
                name: '到底是谁在乱扔垃圾',
                description: '连续钓上3次垃圾',
                icon: '徽章.png'
            },
            {
                id: 'time',
                name: '时光啊时光...',
                description: '首次中杆金枪鱼但没钓上',
                icon: '徽章.png'
            },
            {
                id: 'oldman',
                name: '老人与海',
                description: '首次钓上金枪鱼',
                icon: '徽章.png'
            },
            {
                id: 'master_sea',
                name: '大海之主',
                description: '集齐所有鱼类（10种）',
                icon: '徽章.png'
            },
            {
                id: 'crystal',
                name: '琉璃梦幻紫层霄水晶坷垃',
                description: '首次获得隐藏款三.png',
                icon: '徽章.png'
            },
            {
                id: 'mystery',
                name: '趣...多多？',
                description: '首次获得四.png',
                icon: '徽章.png'
            },
            {
                id: 'nereus',
                name: '涅柔斯',
                description: '钓鱼100次中有80杆成功',
                icon: '徽章.png'
            },
            {
                id: 'ebisu',
                name: '惠比寿',
                description: '钓鱼10次中有7杆成功',
                icon: '徽章.png'
            }
        ];
        
        // 白色污染案例库
        const pollutionCases = [
            '🐢 2018年，泰国一只海龟因误食80多个塑料袋而死亡。塑料袋在海龟胃中无法消化，导致它无法进食而饿死。',
            '🐋 2019年，菲律宾海岸发现一头死亡的柯氏喙鲸，其胃中有40公斤塑料垃圾，包括购物袋和大米袋。',
            '🦭 每年约有10万只海洋哺乳动物和100万只海鸟因塑料污染而死亡。它们误食塑料或被塑料缠绕窒息。',
            '🐠 研究发现，90%的海鸟胃中含有塑料碎片。到2050年，几乎所有海鸟都会受到塑料污染影响。',
            '🦈 塑料微粒进入食物链，从浮游生物到大型鱼类，最终回到人类餐桌。我们每周平均摄入5克塑料。',
            '🐙 2020年，印尼一只海豚被发现胃中有5.9公斤塑料垃圾，包括115个塑料杯和25个塑料袋。',
            '🦀 塑料污染导致珊瑚礁生态系统崩溃，影响超过25%的海洋生物栖息地。',
            '🐚 每年约有800万吨塑料垃圾进入海洋，相当于每分钟倾倒一卡车塑料。',
            '🦑 海洋中的塑料会分解成微塑料，但永远不会完全消失，可能存在数百年。',
            '🐡 研究显示，52%的海龟曾误食塑料垃圾，这严重影响它们的消化系统和生存能力。'
        ];
        
        let caughtFoods = new Set(JSON.parse(sessionStorage.getItem('caughtFoods') || '[]'));
        let totalAttempts = parseInt(sessionStorage.getItem('totalAttempts') || '0');
        let recentAttempts = JSON.parse(sessionStorage.getItem('recentAttempts') || '[]'); // 最近10次记录
        
        // 食物配置：概率、稀有度、描述、难度
        // 垃圾类型：7, 8, 9
        const trashIds = [7, 8, 9];
        const foodConfig = {
            1: { 
                name: '沙丁鱼', 
                probability: 0.18, 
                rarity: 'common', 
                rarityText: '普通',
                description: '最常见的小鱼，容易钓到',
                barSize: 80,
                fishSpeed: 18,
                score: 10
            },
            2: { 
                name: '鳕鱼', 
                probability: 0.12, 
                rarity: 'uncommon', 
                rarityText: '常见',
                description: '珍贵的白肉鱼',
                barSize: 70,
                fishSpeed: 22,
                score: 20
            },
            3: { 
                name: '金枪鱼', 
                probability: 0.10, 
                rarity: 'legendary', 
                rarityText: '传说',
                description: '极其罕见的大鱼！',
                barSize: 45,
                fishSpeed: 30,
                score: 100
            },
            4: { 
                name: '稀有贝壳', 
                probability: 0.08, 
                rarity: 'epic', 
                rarityText: '史诗',
                description: '珍贵的贝壳，很难钓到',
                barSize: 50,
                fishSpeed: 28,
                score: 60
            },
            5: { 
                name: '普通贝壳', 
                probability: 0.10, 
                rarity: 'rare', 
                rarityText: '稀有',
                description: '漂亮的贝壳',
                barSize: 65,
                fishSpeed: 20,
                score: 30
            },
            6: { 
                name: '章鱼', 
                probability: 0.08, 
                rarity: 'rare', 
                rarityText: '稀有',
                description: '滑溜溜的章鱼，很难抓住！',
                barSize: 60,
                fishSpeed: 25,
                score: 35
            },
            7: { 
                name: '可乐瓶', 
                probability: 0.04, 
                rarity: 'trash', 
                rarityText: '垃圾',
                description: '可乐瓶...这会害死鲨鱼！',
                barSize: 75,
                fishSpeed: 15,
                score: 0
            },
            8: { 
                name: '外卖盒', 
                probability: 0.03, 
                rarity: 'trash', 
                rarityText: '垃圾',
                description: '外卖盒...不能吃',
                barSize: 75,
                fishSpeed: 15,
                score: 0
            },
            9: { 
                name: '塑料袋', 
                probability: 0.03, 
                rarity: 'trash', 
                rarityText: '垃圾',
                description: '会套住鲨鱼的！',
                barSize: 75,
                fishSpeed: 15,
                score: 0
            },
            10: { 
                name: '鲫鱼', 
                probability: 0.10, 
                rarity: 'common', 
                rarityText: '普通',
                description: '只是一条普通的小鱼',
                barSize: 75,
                fishSpeed: 18,
                score: 12
            },
            11: { 
                name: '胭脂鱼', 
                probability: 0.05, 
                rarity: 'protected', 
                rarityText: '保护鱼类',
                description: '有着"亚洲美人鱼""吉祥鱼"的美称，是野外种群为国家二级保护野生动物',
                barSize: 55,
                fishSpeed: 25,
                score: 80
            },
            12: { 
                name: '长江刀鱼', 
                probability: 0.04, 
                rarity: 'rare', 
                rarityText: '稀有',
                description: '非常好吃的鱼呢！',
                barSize: 55,
                fishSpeed: 25,
                score: 40
            },
            13: { 
                name: '中华鲟', 
                probability: 0.03, 
                rarity: 'protected', 
                rarityText: '保护鱼类',
                description: '是地球上现存最古老的鱼类之一，被誉为"水中活化石""长江鱼王"，同时也是国家一级保护野生动物',
                barSize: 50,
                fishSpeed: 28,
                score: 120
            },
            14: { 
                name: '神秘包裹', 
                probability: 0.05, 
                rarity: 'legendary', 
                rarityText: '传说',
                description: '嗯...是盲盒呢！',
                barSize: 45,
                fishSpeed: 30,
                score: 0
            }
        };

        // 加载成就
        function loadAchievements() {
            const unlocked = JSON.parse(sessionStorage.getItem('unlockedAchievements') || '[]');
            unlocked.forEach(img => {
                const achMap = {'一.png': 'ach1', '二.png': 'ach2', '三.png': 'ach3', '四.png': 'ach4', '五.png': 'ach5'};
                const achId = achMap[img];
                if (achId) {
                    document.getElementById(achId).classList.add('unlocked');
                }
            });
        }
        loadAchievements();
        
        // 初始赠送盲盒
        function giveStarterBox() {
            const hasReceivedStarterBox = sessionStorage.getItem('starterBoxReceived');
            if (!hasReceivedStarterBox) {
                sessionStorage.setItem('starterBoxReceived', 'true');
                
                // 延迟显示欢迎礼包
                setTimeout(() => {
                    catchImage.src = '14.jpg';
                    catchTitle.textContent = '🎁 欢迎礼包！';
                    catchDescription.textContent = '欢迎来到钓鱼游戏！送你一个神秘包裹作为新手礼物！点击关闭领取～';
                    catchRarity.textContent = '传说';
                    catchRarity.className = 'rarity legendary';
                    
                    // 显示关闭按钮，隐藏挑战按钮
                    document.getElementById('catchCloseBtn').style.display = 'block';
                    document.getElementById('challengeButtons').style.display = 'none';
                    
                    // 设置关闭后的回调
                    window.starterBoxPending = true;
                    
                    catchNotification.classList.add('show');
                }, 1000);
            }
        }
        giveStarterBox();
        
        // 关闭钓到提示
        function closeCatchNotification() {
            catchNotification.classList.remove('show');
            document.getElementById('catchCloseBtn').style.display = 'none';
            
            // 如果是新手礼包
            if (window.starterBoxPending) {
                window.starterBoxPending = false;
                addToBasket(14);
            }
            
            // 如果是奖励盲盒
            if (window.bonusBoxPending) {
                window.bonusBoxPending = false;
                addToBasket(14);
            }
        }
        
        // 渲染成就面板
        function renderAchievementsPanel() {
            const panel = document.getElementById('achievementsPanel');
            const unlockedCount = unlockedFishingAchievements.size;
            const totalCount = achievementsConfig.length;
            panel.innerHTML = `<h3>🏆 钓鱼成就 (${unlockedCount}/${totalCount})</h3>`;
            
            achievementsConfig.forEach(ach => {
                const isUnlocked = unlockedFishingAchievements.has(ach.name);
                const item = document.createElement('div');
                item.className = `achievement-item ${isUnlocked ? 'unlocked' : 'locked'}`;
                item.onclick = (e) => {
                    e.stopPropagation();
                    showAchievementDetail(ach, isUnlocked);
                };
                
                let progress = '';
                if (!isUnlocked) {
                    if (ach.id === 'captain') progress = `${consecutiveFails}/5`;
                    else if (ach.id === 'colonel') progress = `${consecutiveFails}/10`;
                    else if (ach.id === 'general') progress = `${totalFails}/50`;
                    else if (ach.id === 'fisher') progress = `${consecutiveSuccess}/3`;
                    else if (ach.id === 'master') progress = `${totalSuccess}/10`;
                    else if (ach.id === 'trash') progress = `${consecutiveTrash}/3`;
                    else if (ach.id === 'master_sea') progress = `${caughtFoods.size}/10`;
                    else if (ach.id === 'nereus') {
                        if (totalAttempts >= 100) {
                            progress = `${totalSuccess}/100`;
                        } else {
                            progress = `隐藏 (${totalAttempts}/100)`;
                        }
                    }
                    else if (ach.id === 'ebisu') {
                        const recentSuccessCount = recentAttempts.reduce((a, b) => a + b, 0);
                        progress = `隐藏 (${recentSuccessCount}/10)`;
                    }
                    else if (ach.id === 'time' || ach.id === 'oldman' || ach.id === 'crystal' || ach.id === 'mystery') progress = '隐藏';
                }
                
                item.innerHTML = `
                    <img src="${ach.icon}" alt="${ach.name}">
                    <div class="info">
                        <div class="name">${ach.name}</div>
                        <div class="progress">${isUnlocked ? '已解锁' : progress}</div>
                    </div>
                `;
                
                panel.appendChild(item);
            });
        }
        
        // 显示成就详情
        function showAchievementDetail(ach, isUnlocked) {
            const detail = document.getElementById('achievementDetail');
            document.getElementById('detailIcon').src = ach.icon;
            document.getElementById('detailName').textContent = ach.name;
            document.getElementById('detailDescription').textContent = ach.description;
            document.getElementById('detailStatus').textContent = isUnlocked ? '已解锁' : '未解锁';
            document.getElementById('detailStatus').className = `status ${isUnlocked ? 'unlocked' : 'locked'}`;
            detail.classList.add('show');
        }
        
        // 关闭成就详情
        function closeAchievementDetail() {
            document.getElementById('achievementDetail').classList.remove('show');
        }
        
        // 初始化成就面板
        renderAchievementsPanel();
        
        // 切换成就面板显示
        function toggleAchievementsPanel() {
            const panel = document.getElementById('achievementsPanel');
            panel.classList.toggle('show');
        }
        
        // 点击面板外部关闭
        document.addEventListener('click', (e) => {
            const panel = document.getElementById('achievementsPanel');
            const button = document.getElementById('achievementsButton');
            if (panel.classList.contains('show') && 
                !panel.contains(e.target) && 
                !button.contains(e.target)) {
                panel.classList.remove('show');
            }
        });

        // 重新开始游戏
        function restartGame() {
            location.reload();
        }

        // 点击鲨鱼跳转AI对话页面
        animal.addEventListener('click', (e) => {
            if (!isPlaying && !isDead && !isFishing) {
                window.location.href = 'ai-chat.html';
            }
        });

        // 点击鱼竿开始钓鱼
        fishingRod.addEventListener('click', () => {
            if (!isPlaying && !isDead && !isFishing) {
                startFishing();
            }
        });

        // 根据概率选择食物
        function selectFoodByProbability() {
            const rand = Math.random();
            let cumulative = 0;
            
            for (let id = 1; id <= 14; id++) {
                cumulative += foodConfig[id].probability;
                if (rand < cumulative) {
                    return id;
                }
            }
            return 1; // 默认返回沙丁鱼
        }
        
        // 开始钓鱼
        function startFishing() {
            isFishing = true;
            fishingGame.classList.add('active');
            
            // 根据概率选择食物
            currentFoodId = selectFoodByProbability();
            currentDifficulty = foodConfig[currentFoodId];
            
            // 根据难度调整玩家条大小
            playerBar.style.height = currentDifficulty.barSize + 'px';
            
            // 初始化钓鱼游戏
            trackHeight = fishingTrack.clientHeight;
            fishPos = trackHeight / 2;
            playerPos = trackHeight / 2;
            fishVelocity = 0;
            playerVelocity = 0;
            progress = 0;
            
            updatePositions();
            
            // 游戏循环（更新频率更高，游戏更流畅更快）
            fishingInterval = setInterval(updateFishing, 30);
        }

        // 更新钓鱼游戏
        function updateFishing() {
            trackHeight = fishingTrack.clientHeight;
            
            // 鱼的AI移动（类似星露谷）
            const fishTargetHeight = 50;
            const playerBarHeight = currentDifficulty.barSize;
            
            // 根据难度调整鱼的速度变化频率和幅度（更频繁、更剧烈）
            const speedChangeChance = 0.05 + (currentDifficulty.fishSpeed - 20) * 0.003;
            if (Math.random() < speedChangeChance) {
                fishVelocity = (Math.random() - 0.5) * (currentDifficulty.fishSpeed * 1.5);
            }
            
            // 鱼的移动（更快）
            fishPos += fishVelocity;
            fishVelocity *= 0.92; // 减少阻力，让鱼移动更快
            
            // 边界检测（反弹更强）
            if (fishPos < 0) {
                fishPos = 0;
                fishVelocity = Math.abs(fishVelocity) * 0.7;
            }
            if (fishPos > trackHeight - fishTargetHeight) {
                fishPos = trackHeight - fishTargetHeight;
                fishVelocity = -Math.abs(fishVelocity) * 0.7;
            }
            
            // 玩家控制（按住空格上升，松开下降）
            if (spacePressed) {
                playerVelocity = -10; // 上升更快
            } else {
                playerVelocity = 6; // 下降（重力）
            }
            
            playerPos += playerVelocity;
            
            // 玩家边界检测
            if (playerPos < 0) playerPos = 0;
            if (playerPos > trackHeight - playerBarHeight) {
                playerPos = trackHeight - playerBarHeight;
            }
            
            // 检测是否覆盖
            const isCatching = (
                playerPos < fishPos + fishTargetHeight &&
                playerPos + playerBarHeight > fishPos
            );
            
            // 更新进度
            if (isCatching) {
                progress += 2;
                if (progress > 100) progress = 100;
            } else {
                progress -= 2; // 失败惩罚更大
                if (progress < 0) progress = 0;
            }
            
            // 更新显示
            updatePositions();
            progressBar.style.width = progress + '%';
            
            // 检查胜利条件
            if (progress >= 100) {
                endFishing(true);
            }
            
            // 检查失败条件（鱼逃跑）
            if (progress <= 0 && Math.random() < 0.02) {
                endFishing(false);
            }
        }

        // 更新位置
        function updatePositions() {
            fishTarget.style.top = fishPos + 'px';
            playerBar.style.top = playerPos + 'px';
        }

        // 显示钓到的食物
        function showCatchNotification(foodId) {
            const food = foodConfig[foodId];
            const isTrash = trashIds.includes(foodId);
            
            catchImage.src = `${foodId}.jpg`;
            catchTitle.textContent = `🎣 钓到了 ${food.name}！`;
            
            // 如果是垃圾，显示污染案例
            if (isTrash) {
                const randomCase = pollutionCases[Math.floor(Math.random() * pollutionCases.length)];
                catchDescription.innerHTML = food.description + '<br><br><span style="color: #ffcccc; font-size: 13px; line-height: 1.6;">' + randomCase + '</span>';
            } else {
                catchDescription.textContent = food.description;
            }
            
            catchRarity.textContent = food.rarityText;
            catchRarity.className = `rarity ${food.rarity}`;
            
            catchNotification.classList.add('show');
            
            // 检查成就
            checkAchievements(true, isTrash, foodId);
            
            setTimeout(() => {
                catchNotification.classList.remove('show');
                
                // 所有东西都放入鱼篓（盲盒需要打开时才挑战）
                setTimeout(() => {
                    addToBasket(foodId);
                }, 500);
            }, 2500);
        }
        
        // 添加到鱼篓
        function addToBasket(foodId) {
            if (fishBasketItems.length >= MAX_BASKET_SIZE) {
                alert('鱼篓已满！请先喂食鲨鱼腾出空间。');
                return;
            }
            
            const food = foodConfig[foodId];
            fishBasketItems.push({
                id: foodId,
                name: food.name,
                timestamp: Date.now()
            });
            
            updateBasketUI();
        }
        
        // 更新鱼篓UI
        function updateBasketUI() {
            const countBadge = document.getElementById('basketCount');
            const tooltip = document.getElementById('basketTooltip');
            
            countBadge.textContent = fishBasketItems.length;
            
            // 更新悬浮提示内容
            let html = `<h4>🐟 鱼篓 (${fishBasketItems.length}/${MAX_BASKET_SIZE})</h4>`;
            
            if (fishBasketItems.length === 0) {
                html += '<div class="empty-msg">鱼篓是空的</div>';
            } else {
                // 定义品质优先级（数值越大优先级越高）
                const rarityPriority = {
                    'legendary': 5,
                    'epic': 4,
                    'rare': 3,
                    'uncommon': 2,
                    'common': 1,
                    'protected': 6,
                    'trash': 0
                };
                
                // 按品质从高到低排序
                const sortedItems = [...fishBasketItems].sort((a, b) => {
                    const rarityA = foodConfig[a.id].rarity;
                    const rarityB = foodConfig[b.id].rarity;
                    return rarityPriority[rarityB] - rarityPriority[rarityA];
                });
                
                sortedItems.forEach((item, index) => {
                    const food = foodConfig[item.id];
                    html += `
                        <div class="fish-item">
                            <img src="${item.id}.jpg" alt="${item.name}">
                            <span>${item.name} <span style="color: ${getRarityColor(food.rarity)}; font-size: 12px;">[${food.rarityText}]</span></span>
                        </div>
                    `;
                });
            }
            
            tooltip.innerHTML = html;
            
            // 更新喂食选择框
            updateFeedSelector();
        }
        
        // 获取品质颜色
        function getRarityColor(rarity) {
            const colors = {
                'common': '#808080',
                'uncommon': '#4CAF50',
                'rare': '#2196F3',
                'epic': '#9C27B0',
                'legendary': '#FF9800',
                'trash': '#8B4513',
                'protected': '#E91E63'
            };
            return colors[rarity] || '#fff';
        }
        
        // 更新喂食选择框
        function updateFeedSelector() {
            const select = document.getElementById('feedSelect');
            const confirmBtn = document.getElementById('confirmFeedBtn');
            
            select.innerHTML = '<option value="">-- 请选择 --</option>';
            
            fishBasketItems.forEach((item, index) => {
                const food = foodConfig[item.id];
                const option = document.createElement('option');
                option.value = index;
                option.textContent = `${item.name} [${food.rarityText}] (+${food.score}分)`;
                select.appendChild(option);
            });
            
            confirmBtn.disabled = true;
        }
        
        // 鱼篓悬浮显示
        const fishBasket = document.getElementById('fishBasket');
        const basketTooltip = document.getElementById('basketTooltip');
        
        fishBasket.addEventListener('mouseenter', () => {
            basketTooltip.classList.add('show');
        });
        
        fishBasket.addEventListener('mouseleave', () => {
            basketTooltip.classList.remove('show');
        });
        
        // 点击鱼篓打开喂食选择框
        fishBasket.addEventListener('click', () => {
            if (!isPlaying && !isDead && !isFishing) {
                openFeedSelector();
            }
        });
        
        // 打开喂食选择框
        function openFeedSelector() {
            if (fishBasketItems.length === 0) {
                alert('鱼篓是空的！先去钓鱼吧。');
                return;
            }
            document.getElementById('feedSelector').classList.add('show');
            basketTooltip.classList.remove('show');
        }
        
        // 关闭喂食选择框
        function closeFeedSelector() {
            document.getElementById('feedSelector').classList.remove('show');
        }
        
        // 选择变化时启用按钮
        document.getElementById('feedSelect').addEventListener('change', (e) => {
            document.getElementById('confirmFeedBtn').disabled = e.target.value === '';
        });
        
        // 当前待处理的盲盒索引
        let pendingBoxIndex = -1;
        
        // 确认喂食
        function confirmFeed() {
            const select = document.getElementById('feedSelect');
            const index = parseInt(select.value);
            
            if (isNaN(index) || index < 0 || index >= fishBasketItems.length) {
                return;
            }
            
            let item = fishBasketItems[index];
            
            // 如果是盲盒（14），必须先打开完成华容道挑战
            if (item.id === 14) {
                pendingBoxIndex = index;
                closeFeedSelector();
                openMysteryBox();
            } else {
                processFeeding(item, index);
            }
        }
        
        // 打开神秘包裹
        function openMysteryBox() {
            // 随机选择1-13的鱼（不包括垃圾7-9）
            const validFishIds = [1, 2, 3, 4, 5, 6, 10, 11, 12, 13];
            puzzleFishId = validFishIds[Math.floor(Math.random() * validFishIds.length)];
            
            const food = foodConfig[puzzleFishId];
            
            // 显示开盲盒结果和挑战按钮
            catchImage.src = `${puzzleFishId}.jpg`;
            catchTitle.textContent = `🎁 盲盒开出了 ${food.name}！`;
            catchDescription.innerHTML = `完成华容道拼图即可获得这条鱼！<br>限时90秒，准备好了吗？`;
            catchRarity.textContent = food.rarityText;
            catchRarity.className = `rarity ${food.rarity}`;
            
            // 显示挑战按钮，隐藏关闭按钮
            document.getElementById('challengeButtons').style.display = 'flex';
            document.getElementById('catchCloseBtn').style.display = 'none';
            
            catchNotification.classList.add('show');
        }
        
        // 接受挑战
        function acceptChallenge() {
            catchNotification.classList.remove('show');
            document.getElementById('challengeButtons').style.display = 'none';
            
            // 从鱼篓移除盲盒
            if (pendingBoxIndex >= 0) {
                fishBasketItems.splice(pendingBoxIndex, 1);
                updateBasketUI();
                pendingBoxIndex = -1;
            }
            
            // 开始华容道游戏
            startPuzzleGame();
        }
        
        // 放弃挑战
        function declineChallenge() {
            catchNotification.classList.remove('show');
            document.getElementById('challengeButtons').style.display = 'none';
            pendingBoxIndex = -1;
            
            // 显示放弃提示
            setTimeout(() => {
                alert('你放弃了挑战，盲盒还在鱼篓里哦！');
            }, 300);
        }
        
        // 处理喂食逻辑
        function processFeeding(item, index) {
            // 从鱼篓移除
            fishBasketItems.splice(index, 1);
            updateBasketUI();
            
            // 关闭选择框
            closeFeedSelector();
            
            // 检查是否是垃圾
            if (trashIds.includes(item.id)) {
                // 喂了垃圾，鲨鱼死亡
                setTimeout(() => {
                    isDead = true;
                    animal.src = 'shark2.jpg';
                    deathMessage.style.display = 'flex';
                }, 500);
            } else {
                // 正常喂食鲨鱼
                fedFoods.push(item.id);
                feedCount++;
                
                // 累加积分
                const food = foodConfig[item.id];
                feedScore += food.score || 0;
                
                // 更新显示（显示当前积分）
                feedCountEl.textContent = `${feedCount} (${feedScore}分)`;
                
                playVideo();
            }
        }
        
        // 结束钓鱼
        function endFishing(success) {
            clearInterval(fishingInterval);
            isFishing = false;
            fishingGame.classList.remove('active');
            
            if (success) {
                // 钓到了！显示食物
                showCatchNotification(currentFoodId);
            } else {
                // 失败了，鱼跑了
                checkAchievements(false, false, currentFoodId);
                alert('鱼跑了！再试一次吧！');
            }
        }

        // 根据积分获取段位评价
        function getRankByScore(score) {
            if (score >= 300) {
                return { rank: '万事不挂怀', color: '#FF1493', desc: '完美的盛宴！鲨鱼心满意足！' };
            } else if (score >= 200) {
                return { rank: '香螺酢荐一欢呼', color: '#FF69B4', desc: '极致的美味！鲨鱼欢呼雀跃！' };
            } else if (score >= 150) {
                return { rank: '钟鸣鼎食', color: '#FFD700', desc: '豪华的盛宴！鲨鱼非常满意！' };
            } else if (score >= 100) {
                return { rank: '酒足饭饱', color: '#FFA500', desc: '丰盛的一餐！鲨鱼吃得很满足！' };
            } else if (score >= 70) {
                return { rank: '适腹充肠', color: '#90EE90', desc: '不错的食物，鲨鱼吃饱了。' };
            } else if (score >= 50) {
                return { rank: '半饱之度', color: '#87CEEB', desc: '还算可以，鲨鱼半饱。' };
            } else if (score >= 30) {
                return { rank: '聊以慰饥', color: '#B0C4DE', desc: '勉强填饱肚子。' };
            } else {
                return { rank: '食不尽味', color: '#808080', desc: '食之无味，鲨鱼不太满意。' };
            }
        }
        
        // 根据食物选择结果图片
        function selectResultByFood(foodId) {
            const rand = Math.random();
            
            // 5%概率出现隐藏款
            if (rand < 0.05) {
                return '三.png';
            }
            
            // 根据食物类型选择结果
            switch(foodId) {
                case 1: // 沙丁鱼 -> 一.png 或 四.png
                    return Math.random() < 0.5 ? '一.png' : '四.png';
                case 2: // 鳕鱼 -> 二.png
                    return '二.png';
                case 3: // 金枪鱼 -> 五.png 或 二.png
                    return Math.random() < 0.5 ? '五.png' : '二.png';
                case 4: // 稀有贝壳 -> 四.png
                    return '四.png';
                case 5: // 普通贝壳 -> 一.png
                    return '一.png';
                case 6: // 章鱼 -> 五.png
                    return '五.png';
                default:
                    return '一.png';
            }
        }
        
        // 播放喂食动画
        function playVideo() {
            isPlaying = true;
            animal.style.display = 'none';
            animalVideo.style.display = 'block';
            animalVideo.currentTime = 0;
            animalVideo.play();

            setTimeout(() => {
                animalVideo.pause();
                animalVideo.style.display = 'none';
                animal.style.display = 'block';
                isPlaying = false;
                
                if (feedCount >= 3) {
                    // 获取段位评价
                    const rankInfo = getRankByScore(feedScore);
                    
                    // 保存段位信息到sessionStorage
                    sessionStorage.setItem('feedScore', feedScore.toString());
                    sessionStorage.setItem('feedRank', rankInfo.rank);
                    sessionStorage.setItem('feedRankColor', rankInfo.color);
                    sessionStorage.setItem('feedRankDesc', rankInfo.desc);
                    
                    const combination = fedFoods.sort().join('-');
                    let resultMap = JSON.parse(sessionStorage.getItem('resultMap') || '{}');
                    if (!resultMap[combination]) {
                        // 根据最后一次喂食的食物选择结果
                        const lastFood = fedFoods[fedFoods.length - 1];
                        resultMap[combination] = selectResultByFood(lastFood);
                        sessionStorage.setItem('resultMap', JSON.stringify(resultMap));
                    }
                    const resultImage = resultMap[combination];
                    sessionStorage.setItem('currentResult', resultImage);
                    
                    // 检查特殊成就
                    if (resultImage === '三.png' && !unlockedFishingAchievements.has('琉璃梦幻紫层霄水晶坷垃')) {
                        showAchievement('琉璃梦幻紫层霄水晶坷垃');
                    }
                    if (resultImage === '四.png' && !unlockedFishingAchievements.has('趣...多多？')) {
                        showAchievement('趣...多多？');
                    }
                    
                    // 解锁成就
                    let unlocked = JSON.parse(sessionStorage.getItem('unlockedAchievements') || '[]');
                    if (!unlocked.includes(resultImage)) {
                        unlocked.push(resultImage);
                        sessionStorage.setItem('unlockedAchievements', JSON.stringify(unlocked));
                    }
                    
                    // 显示段位评价弹窗
                    showRankEvaluation(feedScore, rankInfo);
                    
                    // 重置数据
                    feedCount = 0;
                    fedFoods = [];
                    feedScore = 0;
                    feedCountEl.textContent = '0 (0分)';
                    loadAchievements();
                }
            }, 2000);
        }

        // 显示成就通知
        function showAchievement(achievementText) {
            if (unlockedFishingAchievements.has(achievementText)) {
                return; // 已解锁的成就不再显示
            }
            
            unlockedFishingAchievements.add(achievementText);
            sessionStorage.setItem('fishingAchievements', JSON.stringify([...unlockedFishingAchievements]));
            
            achievementName.textContent = achievementText;
            achievementNotification.classList.add('show');
            
            setTimeout(() => {
                achievementNotification.classList.remove('show');
            }, 4000);
        }
        
        // 显示奖励盲盒通知
        function showBonusBoxNotification() {
            catchImage.src = '14.jpg';
            catchTitle.textContent = '🎁 奖励！钓鱼达人礼包！';
            catchDescription.textContent = `恭喜你成功钓鱼${totalSuccess}次！获得一个神秘包裹作为奖励！点击关闭领取～`;
            catchRarity.textContent = '传说';
            catchRarity.className = 'rarity legendary';
            
            // 显示关闭按钮，隐藏挑战按钮
            document.getElementById('catchCloseBtn').style.display = 'block';
            document.getElementById('challengeButtons').style.display = 'none';
            
            // 设置关闭后的回调
            window.bonusBoxPending = true;
            
            catchNotification.classList.add('show');
        }
        
        // 检查成就
        function checkAchievements(isSuccess, isTrash, foodId = 0) {
            // 记录钓鱼尝试
            totalAttempts++;
            sessionStorage.setItem('totalAttempts', totalAttempts.toString());
            
            // 记录最近10次
            recentAttempts.push(isSuccess ? 1 : 0);
            if (recentAttempts.length > 10) {
                recentAttempts.shift();
            }
            sessionStorage.setItem('recentAttempts', JSON.stringify(recentAttempts));
            
            // 检查惠比寿成就（10次中7次成功）
            if (recentAttempts.length === 10) {
                const recentSuccessCount = recentAttempts.reduce((a, b) => a + b, 0);
                if (recentSuccessCount >= 7 && !unlockedFishingAchievements.has('惠比寿')) {
                    showAchievement('惠比寿');
                }
            }
            
            // 检查涅柔斯成就（100次中80次成功）
            if (totalAttempts >= 100) {
                const successRate = totalSuccess / totalAttempts;
                if (successRate >= 0.8 && !unlockedFishingAchievements.has('涅柔斯')) {
                    showAchievement('涅柔斯');
                }
            }
            
            if (isSuccess) {
                consecutiveSuccess++;
                consecutiveFails = 0;
                totalSuccess++;
                
                // 记录钓到的食物（不包括垃圾7-9和盲盒14）
                const validFoodIds = [1, 2, 3, 4, 5, 6, 10, 11, 12, 13];
                if (validFoodIds.includes(foodId)) {
                    caughtFoods.add(foodId);
                    sessionStorage.setItem('caughtFoods', JSON.stringify([...caughtFoods]));
                    
                    // 首次钓上金枪鱼
                    if (foodId === 3 && !unlockedFishingAchievements.has('老人与海')) {
                        showAchievement('老人与海');
                    }
                    
                    // 集齐所有食物（10种有效鱼类）
                    if (caughtFoods.size === 10 && !unlockedFishingAchievements.has('大海之主')) {
                        showAchievement('大海之主');
                    }
                }
                
                if (!isTrash) {
                    consecutiveTrash = 0;
                }
                
                // 连续三次成功
                if (consecutiveSuccess === 3 && !unlockedFishingAchievements.has('捕鱼能手')) {
                    showAchievement('捕鱼能手');
                }
                
                // 累计十次成功
                if (totalSuccess === 10 && !unlockedFishingAchievements.has('河边蓑笠翁')) {
                    showAchievement('河边蓑笠翁');
                }
                
                // 每钓10条送一个盲盒
                if (totalSuccess > 0 && totalSuccess % 10 === 0) {
                    setTimeout(() => {
                        showBonusBoxNotification();
                    }, 3000);
                }
                
                // 连续三次垃圾
                if (isTrash) {
                    consecutiveTrash++;
                    if (consecutiveTrash === 3 && !unlockedFishingAchievements.has('到底是谁在乱扔垃圾')) {
                        showAchievement('到底是谁在乱扔垃圾');
                    }
                }
            } else {
                consecutiveFails++;
                consecutiveSuccess = 0;
                consecutiveTrash = 0;
                totalFails++;
                
                // 首次金枪鱼逃跑
                if (foodId === 3 && !unlockedFishingAchievements.has('时光啊时光...')) {
                    showAchievement('时光啊时光...');
                }
                
                // 连续五次失败
                if (consecutiveFails === 5 && !unlockedFishingAchievements.has('空军上尉')) {
                    showAchievement('空军上尉');
                }
                
                // 连续十次失败
                if (consecutiveFails === 10 && !unlockedFishingAchievements.has('空军上校')) {
                    showAchievement('空军上校');
                }
                
                // 累计五十次失败
                if (totalFails === 50 && !unlockedFishingAchievements.has('将！军！')) {
                    showAchievement('将！军！');
                }
            }
            
            // 更新成就面板
            renderAchievementsPanel();
        }
        
        // 生成背景飘过的食物
        function createFloatingFood() {
            if (isDead) return;
            
            const food = document.createElement('img');
            const foodId = Math.floor(Math.random() * 6) + 1; // 1-6，不包括垃圾
            food.src = `${foodId}.jpg`;
            food.className = 'floating-food';
            
            const randomY = Math.random() * (window.innerHeight - 100);
            food.style.top = randomY + 'px';
            food.style.right = '-60px';
            
            const duration = 15 + Math.random() * 10; // 15-25秒，缓慢飘过
            food.style.animationDuration = duration + 's';
            
            document.body.appendChild(food);
            
            food.addEventListener('animationend', () => {
                food.remove();
            });
        }

        // 定期生成飘过的食物
        setInterval(createFloatingFood, 3000);
        createFloatingFood();

        // 键盘控制
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' && isFishing) {
                e.preventDefault();
                spacePressed = true;
            }
        });

        document.addEventListener('keyup', (e) => {
            if (e.code === 'Space') {
                e.preventDefault();
                spacePressed = false;
            }
        });
        
        // ========== 华容道拼图游戏 ==========
        let puzzleTimer = null;
        let puzzleTimeLeft = 300; // 5分钟
        let puzzleFishId = 0;
        let puzzlePieces = []; // 0-7为图片块，8为空格
        let emptyPos = 8; // 空格位置
        let puzzleStarted = false;
        
        // 启动拼图游戏
        function startPuzzleGame() {
            puzzleStarted = true;
            
            // 初始化华容道
            initSlidingPuzzle(puzzleFishId);
            
            // 显示游戏界面
            document.getElementById('puzzleGame').classList.add('show');
            document.getElementById('puzzlePreviewImg').src = `${puzzleFishId}.jpg`;
            
            // 启动计时器（5分钟）
            puzzleTimeLeft = 300;
            updateTimerDisplay();
            puzzleTimer = setInterval(() => {
                puzzleTimeLeft--;
                updateTimerDisplay();
                
                if (puzzleTimeLeft <= 0) {
                    endPuzzleGame(false);
                }
            }, 1000);
        }
        
        // 更新计时器显示
        function updateTimerDisplay() {
            const timerEl = document.getElementById('puzzleTimer');
            timerEl.textContent = puzzleTimeLeft;
            
            if (puzzleTimeLeft <= 10) {
                timerEl.classList.add('warning');
            } else {
                timerEl.classList.remove('warning');
            }
        }
        
        // 初始化华容道拼图
        function initSlidingPuzzle(fishId) {
            const container = document.getElementById('puzzleContainer');
            container.innerHTML = '';
            
            // 创建9个位置（0-7为图片块，8为空格）
            puzzlePieces = [0, 1, 2, 3, 4, 5, 6, 7, 8];
            emptyPos = 8;
            
            // 打乱拼图（通过模拟移动确保可解）
            shuffleSlidingPuzzle();
            
            // 渲染拼图
            renderSlidingPuzzle(fishId);
        }
        
        // 打乱华容道（通过模拟移动）
        function shuffleSlidingPuzzle() {
            // 模拟100次随机移动
            for (let i = 0; i < 100; i++) {
                const neighbors = getNeighbors(emptyPos);
                const randomNeighbor = neighbors[Math.floor(Math.random() * neighbors.length)];
                
                // 交换空格和随机相邻块
                [puzzlePieces[emptyPos], puzzlePieces[randomNeighbor]] = 
                    [puzzlePieces[randomNeighbor], puzzlePieces[emptyPos]];
                emptyPos = randomNeighbor;
            }
        }
        
        // 获取相邻位置
        function getNeighbors(pos) {
            const neighbors = [];
            const row = Math.floor(pos / 3);
            const col = pos % 3;
            
            if (row > 0) neighbors.push(pos - 3); // 上
            if (row < 2) neighbors.push(pos + 3); // 下
            if (col > 0) neighbors.push(pos - 1); // 左
            if (col < 2) neighbors.push(pos + 1); // 右
            
            return neighbors;
        }
        
        // 渲染华容道拼图
        function renderSlidingPuzzle(fishId) {
            const container = document.getElementById('puzzleContainer');
            container.innerHTML = '';
            
            puzzlePieces.forEach((pieceIndex, position) => {
                const piece = document.createElement('div');
                piece.className = 'puzzle-piece';
                piece.dataset.position = position;
                piece.dataset.pieceIndex = pieceIndex;
                
                if (pieceIndex === 8) {
                    // 空格
                    piece.classList.add('empty');
                } else {
                    // 计算背景位置
                    const row = Math.floor(pieceIndex / 3);
                    const col = pieceIndex % 3;
                    piece.style.backgroundImage = `url('${fishId}.jpg')`;
                    piece.style.backgroundPosition = `${-col * 100}px ${-row * 100}px`;
                    
                    piece.addEventListener('click', () => handleSlidingClick(position));
                }
                
                container.appendChild(piece);
            });
        }
        
        // 处理华容道点击
        function handleSlidingClick(position) {
            // 检查是否与空格相邻
            const neighbors = getNeighbors(emptyPos);
            
            if (neighbors.includes(position)) {
                // 交换点击的块和空格
                [puzzlePieces[emptyPos], puzzlePieces[position]] = 
                    [puzzlePieces[position], puzzlePieces[emptyPos]];
                emptyPos = position;
                
                // 重新渲染
                renderSlidingPuzzle(puzzleFishId);
                
                // 检查是否完成
                if (checkSlidingComplete()) {
                    endPuzzleGame(true);
                }
            }
        }
        
        // 检查华容道是否完成
        function checkSlidingComplete() {
            for (let i = 0; i < puzzlePieces.length; i++) {
                if (puzzlePieces[i] !== i) {
                    return false;
                }
            }
            return true;
        }
        
        // 放弃挑战
        function giveUpPuzzle() {
            if (confirm('确定要放弃挑战吗？鱼会跑掉哦！')) {
                endPuzzleGame(false, true);
            }
        }
        
        // 结束拼图游戏
        function endPuzzleGame(success, gaveUp = false) {
            clearInterval(puzzleTimer);
            puzzleStarted = false;
            document.getElementById('puzzleGame').classList.remove('show');
            
            const resultEl = document.getElementById('puzzleResult');
            const resultImg = document.getElementById('puzzleResultImg');
            const resultTitle = document.getElementById('puzzleResultTitle');
            const resultDesc = document.getElementById('puzzleResultDesc');
            const resultBtn = document.getElementById('puzzleResultBtn');
            
            if (success) {
                const food = foodConfig[puzzleFishId];
                resultImg.src = `${puzzleFishId}.jpg`;
                resultTitle.textContent = `🎉 恭喜获得 ${food.name}！`;
                resultDesc.textContent = food.description;
                resultBtn.className = 'success-btn';
                resultBtn.textContent = '放入鱼篓';
                resultBtn.onclick = () => {
                    closePuzzleResult();
                    addToBasket(puzzleFishId);
                };
            } else {
                resultImg.src = '14.jpg';
                resultTitle.textContent = gaveUp ? '😢 放弃挑战' : '⏰ 时间到！';
                resultDesc.textContent = gaveUp ? '你放弃了挑战，鱼跑掉了...' : '很遗憾，拼图未能完成，鱼跑掉了...';
                resultBtn.className = 'fail-btn';
                resultBtn.textContent = '确定';
                resultBtn.onclick = closePuzzleResult;
            }
            
            resultEl.classList.add('show');
        }
        
        // 关闭拼图结果
        function closePuzzleResult() {
            document.getElementById('puzzleResult').classList.remove('show');
        }
        
        // 显示段位评价弹窗
        function showRankEvaluation(score, rankInfo) {
            const modal = document.getElementById('rankEvaluation');
            const rankName = document.getElementById('rankName');
            const rankScore = document.getElementById('rankScore');
            const rankDesc = document.getElementById('rankDesc');
            const rankStars = document.getElementById('rankStars');
            
            // 设置内容
            rankName.textContent = rankInfo.rank;
            rankName.style.color = rankInfo.color;
            rankScore.textContent = `总积分: ${score}`;
            rankDesc.textContent = rankInfo.desc;
            
            // 设置边框颜色
            modal.style.borderColor = rankInfo.color;
            
            // 根据积分显示星星数量
            let starCount = 1;
            if (score >= 300) starCount = 5;
            else if (score >= 200) starCount = 5;
            else if (score >= 150) starCount = 4;
            else if (score >= 100) starCount = 4;
            else if (score >= 70) starCount = 3;
            else if (score >= 50) starCount = 3;
            else if (score >= 30) starCount = 2;
            
            // 生成星星
            let starsHtml = '';
            for (let i = 0; i < starCount; i++) {
                starsHtml += `<span class="rank-star">⭐</span>`;
            }
            rankStars.innerHTML = starsHtml;
            
            // 显示弹窗
            setTimeout(() => {
                modal.classList.add('show');
            }, 300);
        }
        
        // 关闭段位评价弹窗
        function closeRankEvaluation() {
            const modal = document.getElementById('rankEvaluation');
            modal.classList.remove('show');
            
            // 延迟打开新窗口，让弹窗关闭动画完成
            setTimeout(() => {
                window.open('pro.html', '_blank');
            }, 400);
        }
    </script>
</body>
</html>
